function uuid(len, radix) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    var uuid = [],
        i;
    radix = radix || chars.length;

    if (len) {
        // Compact form
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
    } else {
        // rfc4122, version 4 form
        var r;

        // rfc4122 requires these characters
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';

        // Fill in random data.  At i==19 set the high bits of clock sequence as
        // per rfc4122, sec. 4.1.5
        for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
                r = 0 | Math.random() * 16;
                uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r];
            }
        }
    }

    return uuid.join('');
}

const dialogMap = new Map();

// window.addEventListener('load', function () {
window.addEventListener('DOMContentLoaded', function () {
    const elementsWithCustomAttribute = document.querySelectorAll('[model]');
    elementsWithCustomAttribute.forEach(function (element) {
        if (element.getAttribute("model") === "dialig") {
            let eId = element.getAttribute("id");
            if (eId != null && eId !== "") {
                var cloneWithChildren = element.cloneNode(true);
                dialogMap.set(eId, cloneWithChildren);
                element.remove();
            }
        }
    });
});


// { name = 'defaultName', age = 25 } = {}
// const createDialog = function ({tempId} ={}) {

const createDialog = function (tempId,params=null,ok,cancel=null) {
    if(params==null){
        params = {};
    }
    var icon = '<i class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg></i>';
    return {
        dialogId: uuid(32, 32),
        width: params.width || "30%",
        tempId: tempId,
        height: params.height || "100px",
        title: params.title || "Dialog",
        ok: ok,
        cancel: cancel,
        open: function () {
            const newDiv = document.createElement('div');
            newDiv.setAttribute("id", this.dialogId);
            newDiv.classList.add("model")
            newDiv.innerHTML = "<div class=\"box\" " + (this.width ? "style=\"width:" + this.width + "\"" : "") + ">" +
                "  <div class=\"header\">" +
                "       <div class=\"title\">" + this.title + "</div>" +
                "       <div class=\"close\" id=\"" + this.dialogId + "Close\">"+icon+"</div>" +
                "  </div>" +
                "  <div class=\"body\" " + (this.height ? "style=\"height:" + this.height + "\"" : "100px") + ">" +
                        dialogMap.get(tempId).innerHTML +
                "  </div>" +
                "  <div class=\"footer\">" +
                "     <div id=\""+this.dialogId+"Cancel\">取消</div>" +
                "     <div class=\"ok\" id=\""+this.dialogId+"Ok\">确认</div>" +
                "  </div>"+
                "</div>";
            document.body.appendChild(newDiv);
            let did = this.dialogId;
            document.getElementById(this.dialogId).addEventListener(
                'click',
                function (event) {
                    if (event.target.getAttribute("id") === did) {
                        event.stopPropagation();
                        document.body.removeChild(document.getElementById(did));
                    }
                },
                false
            );
            document.getElementById(this.dialogId + "Close").addEventListener('click', function () {    
                    document.body.removeChild(document.getElementById(did));
                }
            );

            document.getElementById(this.dialogId + "Cancel").addEventListener('click', function () {
                    if(cancel!=null){
                        cancel();
                    }
                    document.body.removeChild(document.getElementById(did));
                }
            );

            document.getElementById(this.dialogId + "Ok").addEventListener('click', function () {
                    if(ok!=null){
                        let result  = ok();
                        if(result){
                            document.body.removeChild(document.getElementById(did));
                        }
                    }
                }
            );
            

        },
        close: function () {
            document.body.removeChild(document.getElementById(this.dialogId));
        }
    };
}




